<script type="text/javascript">

function showDocument(id) {
    alert('show document'); // TODO
}

$(document).ready(function() {

    jQuery("#documentTable").jqGrid({
           onSelectRow: function(id) {showDocument(id);},
           sortable: true,
           ajaxGridOptions : {type:"POST"},
           url:'/document/get-document-table-json/groupid/<?=$this->groupId?>',
           datatype: "json",
           colNames:['Id','Title','Content', 'Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'title',index:'title',width:150,editable:true},
               {name:'content',index:'content', width:170,editable:true},
               {name:'timestamp',index:'timestamp', width:160}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/document/set-document-table-json/groupid/<?=$this->groupId?>',
           caption:"Documents List" }).
           navGrid('#pager2',{edit:true,add:true,del:true})

        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });



});


</script>
<h3> Documents <?=$this->groupTitle?></h3>
<table id="documentTable" class="scroll" cellpadding="0" cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>

